<template>
  <div>
    <uploader
      :options="options"
      :file-status-text="fileStatusText"
      class="uploader-example"
      ref="uploaderRef"
    >
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <p>拖动上传</p>
        <uploader-btn>选择图片</uploader-btn>
        <uploader-btn :attrs="attrs">多文件</uploader-btn>
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>
  </div>
</template>

<script>
import { nextTick, ref, onMounted } from "vue";
export default {
  setup() {
    const baseUrl = `http://localhost:3000`;
    const uploaderRef = ref(null);
    const userStore = useUserStore();
    const token = userStore.token;
    const options = {
      target: `${baseUrl}/api/admin/upload`, // '//jsonplaceholder.typicode.com/posts/',
      testChunks: false,
      headers: {
        Authorization: "Bearer " + token,
      },
    };
    const attrs = {
      accept: "image/*",
    };
    const fileStatusText = (status, response) => {
      const statusTextMap = {
        success: "成功",
        error: "错误",
        uploading: "上传中...",
        paused: "暂停",
        waiting: "等待中...",
      };
      if (status === "success" || status === "error") {
        console.log(response);
        return response.data;
      } else {
        return statusTextMap[status];
      }
    };
    onMounted(() => {
      nextTick(() => {
        window.uploader = uploaderRef.value.uploader;
      });
    });
    return {
      uploaderRef,
      options,
      attrs,
      fileStatusText,
    };
  },
};
</script>

<style>
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
